<template>
    <a-modal title="参数配置" width="900px" :visible="visible" @cancel="handleCancel" @ok="handleOk">
        <a-form :inline="false" :model="params" layout="inline" size="small" labelAlign="left">
            <a-form-item label="类型">
                <a-select v-model="params.type" placeholder="请选择" style="width:180px">
                    <a-select-option v-for="item in typeList" :key="item.value">
                        {{ item.label }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="名称">
                <a-input v-model="params.name" placeholder="请输入"></a-input>
            </a-form-item>
            <a-form-item label="值">
                <a-input v-model="params.value" placeholder="请输入"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button @click="addParams" type="primary">添加</a-button>
            </a-form-item>
        </a-form>
        <a-table :columns="columns" :rowKey="(record, index) => { return index }" :dataSource="dataList">
            <span slot="operate" slot-scope="text,scope,index" @click="remove(scope, index)" class="remove">
                删除
            </span>
        </a-table>
    </a-modal>
</template>

<script>
export default {
    props: {
        list: {
            type: Array
        },
    },
    data() {
        return {
            params: {},
            visible: false,
            dataList: [],
            columns: [
                {
                    title: "类型",
                    dataIndex: "type",
                    key: "type",
                    align: "center"
                }, {
                    title: "名称",
                    dataIndex: "name",
                    key: "name",
                    align: "center"
                }, {
                    title: "值",
                    dataIndex: "value",
                    key: "value",
                    align: "center"
                }, {
                    title: "操作",
                    scopedSlots: { customRender: 'operate' },
                    align: "center"
                }
            ],
            typeList: [
                { label: '字符串', value: 'stringValue' },
                { label: '表达式', value: 'expression' }
            ]
        }
    },
    methods: {
        showModal() {
            this.dataList = JSON.parse(JSON.stringify(this.list))
            this.visible = true;
        },
        handleOk(e) {
            this.$emit("setData", this.dataList)
            this.handleCancel();
        },
        handleCancel(e) {
            this.visible = false;
            this.params = {}
        },
        remove(scope, index) {
            this.dataList.splice(index, 1)
        },
        addParams() {
            this.dataList.push(this.params)
            this.params = {}
        }
    }
}
</script>

<style scoped>
.remove {
    cursor: pointer;
}

.ant-table-wrapper {
    margin-top: 20px;
    padding: 0 20px;
}
</style>